<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{template "header"}}
    <title>register</title>
</head>
<body>
<div class="o-container">
    <div class="box">
        <form class="form">
            <div class="form-group form-inline">
                <label for="" class="col-sm-2">appid:</label>
                <input type="text" name="appid" class="form-control col-sm-7" placeholder="">
                <div class="col-sm-3">
                    <input type="button" class="btn btn-primary create_appid" value="random">
                </div>
            </div>
            <div class="form-group form-inline">
                <label for="" class="col-sm-2">secret:</label>
                <input type="text" name="secret" class="form-control col-sm-7" placeholder="">
                <div class="col-sm-3">
                    <input type="button" class="btn btn-primary create_secret" value="random">
                </div>
            </div>
            <div class="form-group form-inline">
                <label for="" class="col-sm-2">&nbsp;</label>
                <input type="button" class="form-control btn btn-dark col-sm-6" value="create">
            </div>
        </form>
    </div>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{{template "footer"}}
<script>
    $(".create_appid").click(() => {
        $("input[name=appid]").val(randomString(16))
    });
    $(".create_secret").click(() => {
        $("input[name=secret]").val(randomString(32))
    });

    function randomString(len) {
        len = len || 32;
        let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        let maxPos = $chars.length;
        let pwd = '';
        for (let i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    $(".btn-dark").click(() => {
        $.ajax({
            url: "/app/register",
            type: "POST",
            data: $(".form").serializeArray(),
            success(e) {
                alert("创建成功")
            },
            error(e, s, et) {
                alert(JSON.parse(e.responseText).msg)
            }
        });
    })

</script>
</body>
</html>